<!--<script setup>-->
<!--import {onMounted, reactive, ref} from "vue";-->
<!--import {$token} from "@/utils/auth.js";-->
<!--import {logout} from "@/api/UserApi.js";-->
<!--import $router from "@/router/index.js";-->

<!--const userInfo = reactive({-->
<!--  username: "zhuyb",-->
<!--  avatar: "https://www.keaitupian.cn/cjpic/frombd/0/253/1929570214/3409526727.jpg",-->
<!--});-->
<!--const state = reactive({-->
<!--  isShowModel: false,-->
<!--  showLoading: false-->
<!--})-->
<!--onMounted(() => {-->
<!--  userInfo.username = $token.getUsername();-->
<!--  // userInfo.avatar = $token.getAvatar();-->
<!--});-->
<!--const handleLogout = () => {-->
<!--  state.isShowModel = true;-->
<!--}-->
<!--const confirmLogout = () => {-->
<!--  state.showLoading = true;-->
<!--  logout().then(() => {-->
<!--    $token.clearAll();-->
<!--    setTimeout(() => {-->
<!--      $router.push("/login");-->
<!--      state.showLoading = false;-->
<!--    }, 200);-->
<!--  }).catch(() => {-->
<!--    state.showLoading = false;-->
<!--  });-->
<!--}-->
<!--const data = ref([-->
<!--  {-->
<!--    id: 1,-->
<!--    name: "zhuyb",-->
<!--    avatar: "https://www.keaitupian.cn/cjpic/frombd/0/253/1929570214/3409526727.jpg",-->
<!--    status: "online",-->
<!--    message: '这是要显示的文本内容啊啊啊啊啊啊',-->
<!--    time: "2021-08-11 12:00:00"-->
<!--  },-->
<!--  {-->
<!--    id: 1,-->
<!--    name: "zhuyb",-->
<!--    avatar: "https://www.keaitupian.cn/cjpic/frombd/0/253/1929570214/3409526727.jpg",-->
<!--    status: "online",-->
<!--    message: '这是要显示的文本内容啊啊啊啊啊啊',-->
<!--    time: "2021-08-11 12:00:00"-->
<!--  },-->
<!--  {-->
<!--    id: 1,-->
<!--    name: "zhuyb",-->
<!--    avatar: "https://www.keaitupian.cn/cjpic/frombd/0/253/1929570214/3409526727.jpg",-->
<!--    status: "online",-->
<!--    message: '这是要显示的文本内容啊啊啊啊啊啊',-->
<!--    time: "2021-08-11 12:00:00"-->
<!--  },-->
<!--  {-->
<!--    id: 1,-->
<!--    name: "zhuyb",-->
<!--    avatar: "https://www.keaitupian.cn/cjpic/frombd/0/253/1929570214/3409526727.jpg",-->
<!--    status: "online",-->
<!--    message: '这是要显示的文本内容啊啊啊啊啊啊',-->
<!--    time: "2021-08-11 12:00:00"-->
<!--  },-->
<!--  {-->
<!--    id: 1,-->
<!--    name: "zhuyb",-->
<!--    avatar: "https://www.keaitupian.cn/cjpic/frombd/0/253/1929570214/3409526727.jpg",-->
<!--    status: "online",-->
<!--    message: '这是要显示的文本内容啊啊啊啊啊啊',-->
<!--    time: "2021-08-11 12:00:00"-->
<!--  },-->
<!--  {-->
<!--    id: 1,-->
<!--    name: "zhuyb",-->
<!--    avatar: "https://www.keaitupian.cn/cjpic/frombd/0/253/1929570214/3409526727.jpg",-->
<!--    status: "online",-->
<!--    message: '这是要显示的文本内容啊啊啊啊啊啊',-->
<!--    time: "2021-08-11 12:00:00"-->
<!--  },-->
<!--  {-->
<!--    id: 1,-->
<!--    name: "zhuyb",-->
<!--    avatar: "https://www.keaitupian.cn/cjpic/frombd/0/253/1929570214/3409526727.jpg",-->
<!--    status: "online",-->
<!--    message: '这是要显示的文本内容啊啊啊啊啊啊',-->
<!--    time: "2021-08-11 12:00:00"-->
<!--  },-->
<!--  {-->
<!--    id: 1,-->
<!--    name: "zhuyb",-->
<!--    avatar: "https://www.keaitupian.cn/cjpic/frombd/0/253/1929570214/3409526727.jpg",-->
<!--    status: "online",-->
<!--    message: '这是要显示的文本内容啊啊啊啊啊啊',-->
<!--    time: "2021-08-11 12:00:00"-->
<!--  },-->
<!--  {-->
<!--    id: 1,-->
<!--    name: "zhuyb",-->
<!--    avatar: "https://www.keaitupian.cn/cjpic/frombd/0/253/1929570214/3409526727.jpg",-->
<!--    status: "online",-->
<!--    message: '这是要显示的文本内容啊啊啊啊啊啊',-->
<!--    time: "2021-08-11 12:00:00"-->
<!--  }-->
<!--])-->
<!--</script>-->

<!--<template>-->
<!--  <d-layout>-->
<!--    <d-header class="chat-header">-->
<!--      <div class="chat-header-left">-->
<!--        <img class="logo-devui" src="https://devui.design/components/assets/logo.svg" alt=""/>-->
<!--        <span class="text">在线聊天系统</span>-->
<!--      </div>-->
<!--      <div class="chat-header-right">-->
<!--        <span class="text">当前用户：{{ userInfo.username }}</span>-->
<!--        <div class="chat-user-avatar">-->
<!--          <d-dropdown trigger="hover">-->
<!--            <d-avatar :imgSrc="userInfo.avatar"></d-avatar>-->
<!--            <template #menu>-->
<!--              <ul class="user-dropdown-list">-->
<!--                <li class="menu-item">个人中心</li>-->
<!--                <li class="menu-item" @click="handleLogout">注销登录</li>-->
<!--              </ul>-->
<!--            </template>-->
<!--          </d-dropdown>-->
<!--        </div>-->
<!--      </div>-->
<!--    </d-header>-->
<!--    <d-layout>-->
<!--      <d-aside class="chat-session-list">-->
<!--        <div class="chat-user-list">-->
<!--          <d-search icon-position="left" placeholder="输入好友ID或账号名称"></d-search>-->
<!--        </div>-->
<!--        <div class="chat-user-list">-->
<!--          <div v-for="item in data" :key="item.id" class="chat-user-item">-->
<!--            <div class="chat-user-avatar">-->
<!--              <d-avatar imgSrc="https://www.keaitupian.cn/cjpic/frombd/0/253/1929570214/3409526727.jpg" :isRound="false"-->
<!--                        :width="44" :height="44"></d-avatar>-->
<!--            </div>-->
<!--            <div class="chat-user-info">-->
<!--              <div class="user-name">{{ item.name }}</div>-->
<!--              <div class="user-message">{{ item.message }}</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </d-aside>-->
<!--      <d-content class="chat-content">-->
<!--        <div class="chat-inner-content">-->
<!--          具体的内容-->
<!--        </div>-->
<!--      </d-content>-->
<!--    </d-layout>-->
<!--  </d-layout>-->
<!--  &lt;!&ndash; 弹出框 &ndash;&gt;-->
<!--  <d-modal v-model="state.isShowModel" :close-on-click-overlay="false">-->
<!--    <template #header>-->
<!--      <d-modal-header>-->
<!--        <span>注销登录</span>-->
<!--      </d-modal-header>-->
<!--    </template>-->
<!--    <div>注销当前登录用户，是否确认？</div>-->
<!--    <template #footer>-->
<!--      <d-modal-footer style="text-align: right; padding-right: 20px;">-->
<!--        <d-button @click="confirmLogout" variant="solid" color="primary" size="sm" :loading="state.showLoading">确认-->
<!--        </d-button>-->
<!--        <d-button @click="state.isShowModel = false" variant="solid" color="secondary" size="sm">取消</d-button>-->
<!--      </d-modal-footer>-->
<!--    </template>-->
<!--  </d-modal>-->
<!--</template>-->

<!--<style scoped>-->
<!--.logo-devui {-->
<!--  width: 26px;-->
<!--  height: 26px;-->
<!--  margin: 0 10px;-->
<!--}-->

<!--.text {-->
<!--  color: #fff;-->
<!--  font-size: 16px;-->
<!--  font-weight: bold;-->
<!--}-->

<!--.user-dropdown-list {-->
<!--  > li {-->
<!--    font-weight: bold;-->
<!--    margin: 10px 10px 10px 10px;-->
<!--    padding: 4px 10px;-->
<!--  }-->

<!--  > li:hover {-->
<!--    cursor: pointer;-->
<!--    background-color: #F7F8FC;-->
<!--    border-radius: 4px;-->
<!--  }-->
<!--}-->

<!--.chat-header {-->
<!--  position: relative;-->
<!--  height: 48px;-->
<!--  padding-left: 34px;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  background-color: #333854;-->

<!--  .chat-header-left {-->
<!--    display: flex;-->
<!--    flex: 1;-->
<!--    align-items: center;-->
<!--  }-->

<!--  .chat-header-right {-->
<!--    padding-right: 34px;-->
<!--    display: flex;-->
<!--    flex: 1;-->
<!--    justify-content: flex-end;-->
<!--    align-items: center;-->
<!--    justify-items: center;-->

<!--    .chat-user-avatar {-->
<!--      margin: 0 20px;-->
<!--      cursor: pointer;-->
<!--    }-->
<!--  }-->
<!--}-->

<!--.chat-session-list {-->
<!--  width: 300px;-->
<!--  height: calc(100vh - 48px);-->
<!--  overflow-y: scroll;-->
<!--  background-color: #fff;-->
<!--  border-left: 1px solid transparent;-->

<!--  .chat-user-list {-->
<!--    margin: 16px;-->
<!--    background-color: #F7F8FC;-->

<!--    .chat-user-item:hover {-->
<!--      background-color: #F6F6FE;-->
<!--    }-->

<!--    .chat-user-item {-->
<!--      cursor: pointer;-->
<!--      display: flex;-->
<!--      align-items: center;-->
<!--      padding: 10px;-->
<!--      border-bottom: 1px solid #E8E9F0;-->

<!--      .chat-user-info {-->
<!--        margin-left: 16px;-->
<!--        text-align: left;-->

<!--        .user-name {-->
<!--          font-weight: bold;-->
<!--        }-->

<!--        .user-message {-->
<!--          font-size: 12px;-->
<!--          color: #999;-->
<!--          margin-top: 4px;-->
<!--          width: calc(100% - 16px);-->
<!--          white-space: nowrap;-->
<!--          overflow: hidden;-->
<!--          text-overflow: ellipsis;-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->

<!--.chat-content {-->
<!--  background-color: #FFFFFF;-->

<!--  .chat-inner-content {-->
<!--    background-color: bisque;-->
<!--    padding: 16px;-->
<!--    height: calc(100vh - 48px);-->
<!--  }-->
<!--}-->
<!--</style>-->